<template>
    <div id='login'>
        <div class="Login_form">
            <a-form
                :model="formState"
                name="login"
                labelAlign="right"
                :label-col="{ span: 6 }"
                autocomplete="off"
                @finish="onFinish"
            >
                <a-form-item
                label="用户名"
                name="usename"
                :rules="[{ required: true, message: '请输入用户名!' }]"
                >
                <a-input v-model:value="formState.usename" />
                </a-form-item>

                <a-form-item
                label="密码"
                name="password"
                :rules="[{ required: true, message: '请输入密码!' }]"
                >
                <a-input-password v-model:value="formState.password" />
                </a-form-item>
                <a-form-item :wrapper-col="{span: 24 }">
                    <a-button type="primary" html-type="submit">注册</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive, onMounted } from 'vue';
import { register } from '@/api/user';
interface FormState {
  usename: string;
  password: string;
}
export default defineComponent({
    setup() {
        const formState = reactive<FormState>({
            usename: '',
            password: ''
        });
        return {formState }
    },
    onMounted() {
        console.log(this.formState)
    },
    methods: {
        onFinish(values: any) {
            console.log(this.formState)
            register(this.formState).then( res => console.log(res))
        }
    }
})
</script>
<style lang="scss" scoped>
#Login{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    display: -webkit-flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    /* background: url('../assets/login-background.jpg') no-repeat left; */
    background-size: 100%;
}
.Login_form {
    width: 440px;
    height: 300px;
    padding: 20px 10px;
    background: rgb(145, 203, 238);
    border: 1px solid #8d8b8b;
    margin: 0 auto;
    line-height: 100%;
    border-radius: 10px;
}
</style>
